<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | General Form Elements</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" th:href="@{/bower_components/bootstrap/dist/css/bootstrap.min.css}">
  <!-- Font Awesome -->
  <link rel="stylesheet" th:href="@{/bower_components/font-awesome/css/font-awesome.min.css}">
  <!-- Ionicons -->
  <link rel="stylesheet" th:href="@{/bower_components/Ionicons/css/ionicons.min.css}">
  <!-- DataTables -->
  <link rel="stylesheet" th:href="@{/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/bower_components/select2/dist/css/select2.min.css}" />
  <!-- Theme style -->
  <link rel="stylesheet" th:href="@{/dist/css/AdminLTE.min.css}">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" th:href="@{/dist/css/skins/_all-skins.min.css}">

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <div th:replace="/common/header :: header"></div>

  <!-- Left side column. contains the logo and sidebar -->

  <div th:replace="/common/aside :: aside"></div>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="row">
        <div class="col-md-6">
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
          </ol>
        </div>
      </div>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <!-- left column -->
        <div class="col-md-12">
          <!-- general form elements -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title"></h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form id="form" th:action="@{/hotel/addHotel}" enctype="multipart/form-data" method="post" >
              <div class="box-body">
                <div class="form-group">
                  <label for="hotelName">酒店名称</label>
                  <input type="text" class="form-control" id="hotelName"  placeholder="输入酒店名称" name="hotelName" >
                </div>
                <div class="form-group">
                  <label for="selectCity">选择城市</label><br>
                  <select id="selectCity" name="cityName" class="form-control select2" >

                  </select>
                </div>
                <div class="form-group">
                  <label for="hotelNumber">联系方式</label>
                  <input type="text" class="form-control" name="hotelNumber" id="hotelNumber" placeholder="酒店联系方式" >
                </div>
                <div class="form-group">
                  <label for="hotelAddress">地址</label>
                  <input type="text" class="form-control" id="hotelAddress" name="hotelAddress" placeholder="酒店地址" >
                </div>
                <div class="form-group">
                  <label for="hotelType">酒店类型</label><br>
                  <select id="hotelType" name="hotelType" class="form-control select2" >
                    <option>请选择</option>
                    <option>商务</option>
                    <option>度假</option>
                    <option>连锁</option>
                    <option>会议</option>
                    <option>观光</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="hotelFile">上传酒店图片</label>
                  <input type="file" id="hotelFile" required name="file">
                </div>
              </div>
              <!-- /.box-body -->

              <div class="box-footer">
                <button type="submit" class="btn btn-primary">提交</button>
              </div>
            </form>
          </div>
          <!-- /.box -->
        </div>
        <!--/.col (left) -->
        <!-- right column -->
       
        <!--/.col (right) -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <div th:replace="/common/footer :: footer"></div>
</div>
<!-- ./wrapper -->
<script th:src="@{/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- DataTables -->
<script th:src="@{/bower_components/datatables.net/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{/bower_components/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/bower_components/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/dist/js/adminlte.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/dist/js/demo.js}"></script>
<script th:src="@{/bower_components/select2/dist/js/select2.full.min.js}"></script>
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/jquery.validate.min.js}"></script>
<script th:src="@{/js/messages_zh.js}"></script>
</body>
<script>
    window.onload = function(){

        $.ajax({
            async: false,
            type: "POST",
            url: "/city/findAllCity",
            dataType: "json",
            data: {
                warehouse: $("#selectCity").val(),   //'选择框id'
            },
            success: function (data) {
                console.log(data);
                $("#selectCity").append("<option >" + '请选择' + "</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#selectCity").append("<option >" + data[i].cityName + "</option>");

                }
            }
        });


        $(function () {
            if ($('#login').text() == "登录") {
                layer.alert("请重新登录");
                window.location.href = "/";
            }
        })

    }

    $.validator.setDefaults({
        submitHandler:function () {
            $('#form').submit();
        }
    })

    jQuery.validator.addMethod("isMobile", function(value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写手机号码");

    $().ready(function () {
        $('#form').validate({
            rules:{
                hotelName:{
                    required:true,
                },
                cityName:{
                    required:true
                },
                hotelNumber:{
                    required:true,
                    minlength:11,
                    isMobile : true
                },
                hotelAddress:{
                    required:true
                },
                hotelType:{
                    required:true
                },

            },
            messages:{
                hotelName:{
                    required:"请输入酒店名称"
                },
                cityName:{
                    required:"请选择所在城市"
                },
                hotelNumber:{
                    required:"请输入正确的手机号码",
                    minlength:"请输入11位手机号",
                    isMobile:"请输入正确的手机号"
                },
                hotelAddress:{
                    required:"请输入有效地址"
                },
                hotelType:{
                    required:"请选择酒店类型"
                }

            }

        })
    })

</script>
</html>
